<template>
  <div class="company">
    <section class="report-box">
      <el-row class="search-box">
        <el-col :span="24">
          <el-input placeholder="姓名或者身份证号" class="search-input" v-model="searchVal">
          </el-input>
          <label for="" class="choose">
            <el-button icon="search" type="primary" @click="search">搜索</el-button>
          </label>
        </el-col>
      </el-row>
    </section>
    <div class="tip">
      <!--<el-button icon="self-daoru" class="blue" @click="importInfo">导入</el-button>-->
      <el-button icon="self-daochu" class="blue" @click="exportData">导出</el-button>
      <!--<el-button icon="document" class="blue" @click.native.prevent="goPage(1)">新增</el-button>-->
    </div>
    <div class="content">
      <el-table :data="dataList" ref="multipleTable" @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="code" label="身份证号"></el-table-column>
        <el-table-column prop="subAccount" label="子账户号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="goPage(2, scope.row)" type="text" size="small"> 缴费详情 </el-button>
            <!--<el-button @click.native.prevent="goPage(3, scope.row)" type="text" size="small"> 编辑 </el-button>-->
            <!--<el-button @click.native.prevent="deleteCompany(scope.row)" type="text" size="small"> 删除 </el-button>-->
          </template>  
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="dataList.length">
      已选{{selectList.length}}人&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="deleteSome">删除</el-button>
    </div>
    <paginate :callback="getData" :page="pageObj"></paginate>
    
  </div>
</template>
<script>
import {companyList, companyDelete} from 'api/social/manage/index'
import upload from 'components/common/upload'
export default {
  data () {
    return {
      searchVal: '', // 搜索字符
      pageObj: {
        currentCount: 1
      }, // 分页数据
      selectList: '', // 选择数据
      dataList: [], // 缴费单位列表
      // httpAddress: '/net/socialadmin/social-company/import', // 导入文件的地址
      httpAddress: 'https://jsonplaceholder.typicode.com/posts/', // 测试的导入文件的地址
      dialogFormVisible: false, // 是否显示导入文件弹框
      uploadSuccess: false, // 上传成功
      param: {}
    }
  },
  created () {
    this.init()
  },
  components: {
    upload
  },
  methods: {
    init () { // 初始化数据
      this.getData(1)
    },
    getData (int) { // 获取数据
      if (!isNaN(this.searchVal)) {
        this.param = {
          page: int,
          count: 15,
          code: this.searchVal
        }
      } else {
        this.param = {
          page: int,
          count: 15,
          name: this.searchVal
        }
      }
      companyList(this.param).then(res => {
        this.dataList = res.data
        this.pageObj = res.page
      })
    },
    search () { // 搜索
      this.getData(1)
    },
    goPage (index, data) { // 路由跳转 1: 新增缴费单位 2: 详情页面 3: 编辑页面
      switch (index) {
        case 1:
          this.$router.push({name: 'add'})
          break
        case 2:
          this.$router.push({name: 'detail', query: {id: data.id}})
          break
        case 3:
          this.$router.push({name: 'edit', query: {id: data.id}})
          break
      }
    },
    handleSelectionChange (val) { // 改变选中
      this.selectList = val
    },
    successCallback (response, file, fileList) { // 上传文件成功回调
      this.dialogFormVisible = false
      this.uploadSuccess = true
      this.$message({
        message: '上传成功!',
        type: 'success'
      })
      this.name = ''
    },
    removeCallback (file, fileList) { // 上传成功的文件用户点击删除
      console.log(file, fileList)
    },
    exportData () { // 导出数据
      if (!this.dataList.length) {
        return this.$message({ message: '暂无数据,不支持导出', type: 'warning' })
      }
      let loginKey = window.localStorage.loginKey
      window.open(`/net/socialadmin/social-company/export?login-key=${loginKey}`)
    },
    importInfo () { // 导入单位信息
      console.log('haha')
    },
    deleteCompany (data) { // 删除
      this.$confirm('此操作将删除该缴费单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        companyDelete({id: data.id}).then(v => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteSome () {
      let ids = this.selectList.map((item) => {
        return item.id
      })
      this.$confirm('此操作将删除选中的缴费单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        companyDelete({id: ids}).then(v => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .company {
    .color_b {
      color: #20a0ff;
    }
    padding: 20px;
    font-size: 14px;
    .search-box {
      padding: 25px 0 25px 25px;
      border: 1px solid #d3dce6;
      .search-input{
        width: 40%;
        margin-right: 20px;
      }
      .choose {
        margin-right: 10px;
        .select-box {
          width: 120px;
        }
      }
    }
    .tip {
      margin: 20px;
      display: flex;
      justify-content: flex-end;
    }
    .footer {
      margin: 20px 0 20px 20px;
    }
    .btn_tip {
      position: relative;
      .blue {
        position: absolute;
        top: 0;
        left: 165px;
        height: 36px;
      }
    }
    .tip_word {
      margin-top: 10px;
      display: flex;
      color: #FF0000;
    }
  }
</style>